<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的班级 - 企业培训平台</title>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <style>
    .class-card {
      border: 1px solid #ddd;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .class-card h3 {
      margin-top: 0;
      color: #333;
    }
    .class-card p {
      color: #666;
      font-size: 0.9em;
    }
    .card-actions {
      margin-top: 10px;
    }
    .card-actions a {
      margin-right: 10px;
    }
    .no-results-message {
      padding: 20px;
      text-align: center;
      color: #6c757d;
      background-color: #e9ecef;
      border-radius: 8px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
  <div class="container">
    <h1 class="page-title">我的班级</h1>

    <div th:if="${successMessage}" class="alert alert-success">
      <p th:text="${successMessage}"></p>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger">
      <p th:text="${errorMessage}"></p>
    </div>

    <div class="class-grid">
      <div class="class-card" th:each="classObj : ${enrolledClasses}">
        <h3 th:text="${classObj.className}">班级名称占位符</h3>
        <p>班级ID: <span th:text="${classObj.id}">班级ID占位符</span></p>
        <p>学生数量: <span th:text="${classObj.classStuNum}">学生数量占位符</span></p>
        <p>课程数量: <span th:text="${classObj.classCouNum}">课程数量占位符</span></p>
        <div class="card-actions">
          <a th:href="@{/student/class/{classId}/courses(classId=${classObj.id})}" class="btn btn-primary btn-sm">查看班级课程</a>
        </div>
      </div>

      <div th:if="${#lists.isEmpty(enrolledClasses)}" class="no-results-message">
        <p>您目前没有加入任何班级。</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
